const itme_li = document.querySelector(".itme_li");
const itme_li_dis = document.querySelector(".itme_li_dis");
const qr_itme_li = document.querySelector(".qr_itme_li");
const qr_itme_img = document.querySelector(".qr_itme_img");
const SecondaryMenu = document.querySelectorAll(".SecondaryMenu");
const direction = document.querySelectorAll(".direction")
const submenu = document.querySelectorAll(".submenu");
const menu = document.querySelector(".menu");
const li = document.querySelectorAll(".commodity_title li");
// 导航隐藏方块
itme_li.onmouseenter = function(){
    itme_li_dis.style.display = "block";
    itme_li.onmouseleave = function(){
        itme_li_dis.style.display = "none";
    }
}
qr_itme_li.onmouseenter = function(){
    qr_itme_img.style.display = "block";
    qr_itme_li.onmouseleave = function(){
        qr_itme_img.style.display = "none";
    }
}
// 二级菜单
for(var j=0;j<submenu.length;j++){
    submenu[j].index = j;
    submenu[j].onmouseenter = function(){
        for( let i = 0;i<submenu.length;i++){
            direction[i].style.display = "none";
            SecondaryMenu[i].style.display = "none";
        }
        direction[this.index].style.display = "block";
        SecondaryMenu[this.index].style.display = "block";
        SecondaryMenu[this.index].style.top = this.index * SecondaryMenu[this.index].offsetWidth/25+"px";
        for(let j=0;j<submenu.length;j++){
            SecondaryMenu[j].onmouseleave = function(){
                this.index = j
                direction[this.index].style.display = "none";
                SecondaryMenu[this.index].style.display = "none";
            }
        }
        
        menu.onmouseleave = function(){
            for(let j=0;j<submenu.length;j++){
                direction[j].style.display = "none";
                SecondaryMenu[j].style.display = "none";
            }
        }
    }
}
// 商品标题
for (var i=0;i<li.length;i++){
    li[i].setAttribute("num",i);
    li[i].num = i;
    li[i].onclick = function(){
        for(var j= 0 ;j<li.length;j++){
            li[j].style.borderBottom= "";
            li[j].style.color= "";
        }
        this.style.borderBottom = "2px solid ";
        this.style.color = "rgb(132,104,94)";

    }
}


// 轮播图
;(function($){
    "use strict";
    $.fn.banner = function(ops){
        ops = ops || {};
        let {itmes,
            btns = true,
            list = true,
            autoPlay = true,
            delayTime = 2000,
            moveTime = 200,
            index = 0,
            prev_text = "prev",
            next_text = "next",
            currentList = ""
        } = ops;
        let prev;
        const imgCont = $("<div class='imgcont'>");
        itmes.forEach(val=>{
            $(`<img src='${val.src}'>`).appendTo(imgCont)
        })
        imgCont.appendTo(this);
        imgCont.children("img").eq(index).css({
            left:0
        });
        if(btns){
            $("<div class='btns'>").appendTo(this).append($("<span class='left iconfont'>"+prev_text+"</span>")).append($("<span class='right iconfont'>"+next_text+"</span>"));
            $(".left").click(leftClick);
            $(".right").click(rightClick);
        }
        function leftClick(){
            if(index === 0){
                index = itmes.length-1;
                prev = 0;
            }else{
                index--;
                prev = index+1;
            }
            btnsMove(1);
        }
        function rightClick(){
            if(index === itmes.length-1){
                index = 0;
                prev = itmes.length-1;
            }else{
                index++;
                prev = index-1;
            }
            btnsMove(-1);
        }
        function btnsMove(direction){
            const offW = imgCont.children("img").eq(0).width();
            imgCont.children("img").eq(prev).css({
                left:0
            }).stop().animate({
                left:offW * direction
            }, moveTime).end().eq(index).css({
                left:-offW * direction
            }).stop().animate({
                left:0
            }, moveTime)
            if(!list)return;
            $(".list").children("li").removeClass(currentList).eq(index).addClass(currentList);
        }
        if(list){
            const list = $("<ul class='list'>").appendTo(this);
            for(let i=0;i<itmes.length;i++){
                list.append($("<li>"+(i+1)+"</li>"));
            }
            list.children("li").eq(index).addClass(currentList).end().click(function(){
                if($(this).index() > index){
                    listMove(index,$(this).index(),-1);
                }
                if($(this).index() < index){
                    listMove(index,$(this).index(),1);
                }
                index = $(this).index();
            })
            function listMove(prev, index, direction){
                const offW = imgCont.children("img").eq(0).width();
                imgCont.children("img").eq(prev).css({
                    left:0
                }).stop().animate({
                    left: offW * direction
                }, moveTime).end().eq(index).css({
                    left: -offW * direction
                }).stop().animate({
                    left:0
                },moveTime);
                list.children("li").removeClass(currentList).eq(index).addClass(currentList);
            }
        }
        if(autoPlay){
            let t = setInterval(()=>{
                rightClick()
            },delayTime);
            this.hover(function(){
                clearInterval(t);
            }, function(){
                t = setInterval(()=>{
                    rightClick();
                }, delayTime);
            })
        }
    }
})(jQuery);
// 主页商品主体的渲染
        class Index{
        constructor(){
            this.cont1 = document.querySelector(".render_ts");
            this.cont2 = document.querySelector(".render_wc");
            this.cont3 = document.querySelector(".render_hn");
            this.foot = document.querySelector(".render_foot");
            this.Leaderboard1 = document.querySelector(".renList_ts>ul");
            this.Leaderboard2 = document.querySelector(".renList_wc>ul");
            this.Leaderboard3 = document.querySelector(".renList_hn>ul");
            this.url = "http://localhost:2926/api?type=idx";
            this.load();
        }
        load(){
            ajaxGet(this.url,res=>{
                this.res = JSON.parse(res);
                const { idxCont, idxFoot, idxLeaderboard} = this.res.data;
                this.idxContRender(idxCont);
                this.idxFootRender(idxFoot);
                this.idxLeaderboardRender(idxLeaderboard);
            })
        }
        // 首页中心内容商品的渲染
        idxContRender(idxCont){
            let str = "";
            idxCont.forEach(val=>{
                str += `<div class="product_itme" index="${val.proId}">
                            <a href="#">
                                <div class="product_itme_img">
                                    <img src="${val.url}" alt="">
                                </div>
                                <h2>${val.name}</h2>
                                <p>
                                    <span class="discount_price">￥${val.price}</span>
                                    <span class="original_price">￥${val.author}</span>
                                </p>           
                            </a>
                        </div>`;
            })
            this.cont1.innerHTML = str;
            this.cont2.innerHTML = str;
            this.cont3.innerHTML = str;
        }
        // 首页底部商品的渲染
        idxFootRender(idxFoot){
            let str = "";
            idxFoot.forEach(val=>{
                str += `<div class="product_itme" index="${val.proId}">
                            <a href="#">
                                <div class="product_itme_img">
                                    <img src="${val.url}" alt="">
                                </div>
                                <h2>${val.name}</h2>
                                <p>
                                    <span class="discount_price">￥${val.price}</span>
                                    <span class="original_price"></span>
                                </p>           
                            </a>
                        </div>`;
            })
            this.foot.innerHTML = str;
        }
        // 首页排行榜的渲染
        idxLeaderboardRender(idxLeaderboard){
            let str = "";
            idxLeaderboard.forEach(val=>{
                str += `<li class="" idx="${val.proId}">
                            <div class="detail" style="display: block;">
                            <div class="img"><img src="${val.url}" alt=""></div>
                            <div class="author"><p>${val.author}</p></div>
                            <div class="price">
                                <p>
                                    ￥${val.price}
                                </p>
                            </div>
                            </div>
                            <div class="ranking">${val.num}</div>
                            <p class="simple">${val.name}</p>
                        </li>`;
            })
            this.Leaderboard1.innerHTML = str;
            this.Leaderboard2.innerHTML = str;
            this.Leaderboard3.innerHTML = str;
        }
        
    }
    new Index();
// 排行榜
window.onload = function(){
    // 刷新后使页面回到顶部
    if(document.body.scrollTop>0){
        window.scrollTo(0,-1);
        document.body.scrollTop=0;
    }
    window.scrollTo(0,-1);
    document.body.scrollTop=0;
    const oli = document.querySelectorAll(".Leaderboard .Leaderboard_manu ul li");
    const imgbox = document.querySelectorAll(".Leaderboard .Leaderboard_manu ul li .detail");
    const simple = document.querySelectorAll(".Leaderboard .Leaderboard_manu ul li .simple");
    for(let i=0;i<oli.length;i++){
        ooli=oli[i];
        ooli.index = i;
        imgbox[i].style.display = "none";
        ooli.onmouseenter = function(){
            for(var j=0;j<oli.length;j++){
                oli[j].className = "";
                simple[j].style.left = "";
                imgbox[j].style.display = "none";
    
            }
            this.className ="active";
            imgbox[this.index].style.display ="block";
            simple[this.index].style.display ="block";
            simple[this.index].style.left = "86px";
            simple[this.index].style.width = "calc(100% - 86px)"; 
    
        }
        ooli.onmouseleave = function(){
            for(let j=0;j<oli.length;j++){
                simple[j].style.width="calc(100% - 32px)";
                simple[j].style.left = "";
            }
            if(imgbox[this.index].style.display == "block"){
                simple[this.index].style.left = "86px";
                simple[this.index].style.width = "calc(100% - 86px)";         
            }
        }
    }
    // 鼠标移入轮播图事件
    class Dbtn{
        constructor(){
            this.banner1 = document.querySelector(".page_banner1");
            this.banner2 = document.querySelector(".page_banner2");
            this.banner3 = document.querySelector(".page_banner3");
            this.btn1 = document.querySelector(".page_banner1 .btns");
            this.btn2 = document.querySelector(".page_banner2 .btns");
            this.btn3 = document.querySelector(".page_banner3 .btns");
            this.addEvent();
        }
        addEvent(){
            this.banner1.addEventListener("mouseenter",()=>{
                this.btn1.style.display = "block";
            })
            this.banner1.addEventListener("mouseleave",()=>{
                this.btn1.style.display = "none";
            })
            this.banner2.addEventListener("mouseenter",()=>{
                this.btn2.style.display = "block";
            })
            this.banner2.addEventListener("mouseleave",()=>{
                this.btn2.style.display = "none";
            })
            this.banner3.addEventListener("mouseenter",()=>{
                this.btn3.style.display = "block";
            })
            this.banner3.addEventListener("mouseleave",()=>{
                this.btn3.style.display = "none";
            })
        }
    }
    new Dbtn();
}
// 登录守卫,加登录之后的购物车数量
class Guard{
    constructor(ops){
        this.nav_span = document.querySelector(".nav_span");
        this.dropOut = ops.dropOut;
        this.render();
        this.addEvent();
    }
    render(){
        if(localStorage.getItem("isLogin") === "YES"){
            this.nav_span.innerHTML = `<a href="./personal.html" style="color:#1e1e1e;">${localStorage.getItem("username")}&nbsp; 新华伴您畅游书海。</a>
                                        <a href="./index.html" class="dropOut">退出登录</a>`;
        }else{
            this.nav_span.innerHTML = `<a href="./login.html">请登录</a>
                                        <a href="./registered.html">免费注册</a>`;
        }
    }
    addEvent(){
        this.nav_span.addEventListener("click",(eve)=>{
            const e = eve || window.event;
            const target = e.target || e.srcElement || e.toElement;
            if(target.className === "dropOut"){
                localStorage.setItem("isLogin","");
            }
        })
    }
}
new Guard({
    dropOut:document.querySelector(".dropOut")
});